<template>
  <div class="box">
    <ul class="list">
      <li v-for="i in list" :key="i.id">
        <img :src="i.img" alt="" />
        <p>{{ i.name }}</p>
        <p>{{ i.price }}</p>
      </li>
    </ul>
    <div class="footer">
      <span>总数：{{ allNumber }}</span>
      <span>合计：{{ allPrice }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: this.$store.state.list.list,
      allPrice: 0,
      allNumber: 0,
    }
  },
  mounted() {
    console.log(this.$store.state)
  },
}
</script>

<style lang="scss" scoped>

.footer {
  position: fixed;
  left:216px;
  bottom:0;
  width: calc(100% - 216px);
  height: 60px;
  background:#fff;
}
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  li {
    width: 24.25%;
    padding: 16px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-right: 1%;
    &:nth-child(4n) {
      margin-right: 0;
    }
    img {
      max-width: 100%;
      height: 200px;
      display: block;
      margin: auto;
    }
    p {
      width: 100%;
    }
  }
}
</style>
